
<script setup>



// 通用轮播图组件
// 时间4s，自动轮播，淡入淡出，带小圆点和首尾连接
// 图片为强制填充满380*213




import store from "../store";
import { Swiper, SwiperSlide } from "swiper/vue";
// 引入swiper样式（按需导入）
import "swiper/css";
import "swiper/css/pagination"; // 轮播图底面的小圆点
import "swiper/css/navigation"; // 轮播图两边的左右箭头
import "swiper/css/scrollbar"; // 轮播图的滚动条
import "swiper/css/effect-fade";
// 轮播图的滚动条
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar, EffectFade } from "swiper";
// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, Scrollbar, EffectFade];
store.sendPolicy();
var SkipTo = function (str) {
  localStorage.setItem("policy", str)
  window.location.replace("../detail/ListPage.html")
};

</script>

<template>
  <swiper :modules="modules" :loop="true" :slides-per-view="1" :space-between="50"
    :autoplay="{ delay: 4000, disableOnInteraction: false }" :pagination="{ clickable: true }" effect="fade">
    <swiper-slide v-for="(item) in store.state.policy.slice(0,6)" key="item">
        <div @click="SkipTo(JSON.stringify(item))" class="a">
          <img :src="item.cover" alt />
        </div>
        <div class="wenzi1">{{ item.theme }}</div>
    </swiper-slide>
    <!-- <swiper-slide>1</swiper-slide>
      <swiper-slide>2</swiper-slide>
      <swiper-slide>3</swiper-slide>
      <swiper-slide>4</swiper-slide>-->
  </swiper>
</template>



<style scoped>
.a>img {
  width: 100%;
  height: 213px;
}

.wenzi1 {
  width: 260px;
  height: 20px;
  position: absolute;
  bottom: 7px;
  left: 7px;
  z-index: 9999;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-shadow: 0 0 2px #414141;
}

.a {
  display: block;
  width: 97%;
  height: 213px;
  overflow: hidden;
  border-radius: 18px;
}
</style>


<style>
.swiper-pagination {
  margin-left: 34%;
}
</style>